<template>
	<view id="list">
		<view class="warn-item" v-for="item in warnList" :key="item.id">
			<u-cell-group>
				<u-cell value="详情">
					<view slot="title" class="u-slot-title">
						{{item.projectName}}
					</view>
				</u-cell>
			</u-cell-group>
			<view class="content-item1">
				<text>设备编号：{{item.deviceNo}}</text>
			</view>
			<view class="warn-item-content">
				<view class="content-item">
					<text>项目类型：{{item.projectType}}</text>
				</view>
				<view class="content-item">
					<text>告警类型：{{item.alertType}}</text>
				</view>
				<view class="content-item">
					<text>负责人：{{item.project.constructorContacts}}</text>
				</view>
			</view>
			<view class="content-time">告警时间：2022-12-06 14:00:00</view>
			<u-gap height="3" bgColor="#eee"></u-gap>
		</view>
	</view>
</template>

<script>
	import { getWarnList } from '@/api/warn'
	export default {
		data () {
			return {
				queryParam: {
					pageNum: 1
				},
				warnList: []
			}
		},
		created () {
			this.getList(this.queryParam)
		},
		onReachBottom() {
			this.queryParam.pageNum++
			this.getList(this.queryParam)
		},
		onPullDownRefresh() {
			this.warnList = []
			this.queryParam.pageNum = 1
			this.getList(this.queryParam)
			uni.stopPullDownRefresh()
		},
		methods: {
			getList (params) {
				uni.showLoading({
					title: '数据加载中',
					mask: true
				})
				getWarnList(params).then(res => {
					const data = res.data.rows
					if (data.length > 0) {
						this.warnList = this.warnList.concat(res.data.rows)
					} else {
						uni.$u.toast('没有更多数据')
					}
				}).catch(error => {
					uni.$u.toast(error)
				}).finally(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	#list {
		font-size: 24upx;
		height: 100vh;
		.warn-item {
			.u-slot-title {
				padding-left: 10upx;
				border-left: 5px solid $u-primary;
			}
			.content-item1 {
				padding: 20upx;
				font-size: 24upx;
				border-bottom: 1px solid $u-light-color;
			}
			.warn-item-content {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				font-size: 24upx;
				padding: 20upx;
				border-bottom: 1px solid $u-light-color;
				.content-item {
					padding: 20upx 0;
					width: 50%;
				}
			}
			.content-time {
				font-size: 24upx;
				padding: 20upx 0 20upx 20upx;
			}
		}
	}
</style>
